<template>
  <view >
<!-- 	<view class="logoWrapper" v-if="!isBaiduLogin">
	  	<view class="logo">
	  		<image src="../../static/logo1.png" mode="widthFix"></image>
	  	</view>
		<view class="text">
			<text>小明的校园美食点评，一款致力于为高校学生提供便捷服务，为公益活动提供免费宣传的宝藏小程序</text>
		</view>
	</view> -->
	<view class="avatar-wrapper">
		<image class="userinfo-avatar" src="../../static/logo1.png"></image>
	</view>
	<view class="nickname">小明的校园美食点评<br>
		热爱美食和生活的小伙伴们的秘密聚集地</view>
	<view class="login1Wrapper" v-if="isBaiduLogin">
		<button type="info" open-type="getUserInfo"
				@getuserinfo="login"><text class="icon iconbaidu"></text>百度账号授权登录</button>
		<!-- <button  @click="login">百度账号授权登录</button> -->
		<view class="cp-link" @click="changeType">账号密码登录<text class="cp-link icon iconarrow-right"></text></view>
	</view>
	<view class="login2Wrapper" v-if="!isBaiduLogin">
		<uni-forms ref="form" :rules="rules">
			<uni-forms-item leftIcon="person" name="username" label='账户:'>
				<input type="text" placeholder="请输入账户名" @input="binddata('username',$event.detail.value)" />
			</uni-forms-item>
			<uni-forms-item leftIcon="locked" name="password" label='密  码:'>
				<input type="text" :password="true" placeholder="请输入密码" @input="binddata('password',$event.detail.value)" />
			</uni-forms-item>
			<button @click="submit">登录</button>
		</uni-forms>
		<view class="footer">
			<view  @click="changeType">&lt; 百度账号登录</view>
			<view  @click="toRegister">注册账号 &gt;</view>
		</view>
	</view>
  </view>
</template>

<script>
import {uniForms, uniFormsItem, uniIcons} from '@dcloudio/uni-ui'
import {oauthLogin, login, authorize} from '../../api/user.js'
import { mapState,mapMutations } from 'vuex'

export default {
  name: 'login',
  data(){
	return {
		nickName: '',
		avatarUrl: '',
		isBaiduLogin: true,
		rules: {
			username: {// name 字段的校验规则
				rules:[// 校验 name 不能为空
					{
						required: true,
						message: '请填写账户名！',
					},
				],
			},
			password: {
				rules:[
					// 校验 name 不能为空
					{
						required: true,
						message: '请填写密码！',
					},
				],
			}
		}
	}
  },
  components: {
    uniForms, uniFormsItem,
  },
  computed:{
	// ...mapState(['hasLogin']),
  },
  onLoad(options){
	// console.log(options)
	// const {avatarUrl, nickName} = options
	// this.avatarUrl = avatarUrl
	// this.nickName = nickName
  },
  methods:{
	...mapMutations({
		storeLogin: 'login'
	}),
	changeType(){
		this.isBaiduLogin = !this.isBaiduLogin
	},
	toRegister(){
		uni.navigateTo({
			url: '/pages/register/index'
		})
	},
	submit(){
		const {form} = this.$refs
		form.submit()
		const {username, password} = form.formData
		if(username && password){
			login({username, password}).then(res=>{
				if(res.code === 200){
					uni.showToast({title: '登录成功'})
					this.storeLogin(res.data)
					if(res.data.schoolId){
						uni.switchTab({url: '/pages/home/index'})
					}else{
						uni.reLaunch({url: '/pages/guide/index'})
					}
				} else {
					uni.showToast({title: res.message, icon: 'none'});
				}
			})
		}
	},
	login(result){
		console.log('mpGetUserInfo', result);
		if (result.detail.errMsg !== 'getUserInfo:ok') {
			uni.showModal({
				title: '获取用户信息失败',
				content: '错误原因' + result.detail.errMsg,
				showCancel: false
			});
			return;
		}
		// const {encryptedData: dy, iv} = result.detail
		const {avatarUrl, nickName} = result.detail.userInfo
		console.log(nickName)
		// authorize({dy, iv}).then(res=>{
		// 	console.log(res)
		// })
		let that = this
		uni.login({
			provider: 'baidu',
			success: function (code) {
				console.log(JSON.stringify(code));
				oauthLogin({...code, username: nickName}).then(res=>{
					if(res.code === 200){
						uni.showToast({title: '登录成功'})
						that.storeLogin({...res.data.userinfo})
						uni.setStorageSync('hasLogin', true);
						uni.setStorageSync('userInfo', {...res.data.userinfo})
						if(res.data.userinfo.schoolId){
							uni.switchTab({url: '/pages/home/index'})
						}else{
							uni.reLaunch({url: '/pages/guide/index'})
						}
					}else{
                        uni.showToast({title: '登录失败', icon: 'none'})
                    }
				}).catch(err=>console.log(err))
			}
		})
	},
  }
}
</script>

<style lang='scss' >
	/* 头条、百度小程序组件内不能引入字体 */
	/* #ifdef MP-BAIDU */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url("~@/static/uni.ttf") format("truetype");
	}
	/* #endif */
	page{
		margin-top: 100rpx;
	}
	button {
	   margin-top: 10rpx;
	   background-color: $theme-color;
	   color: #ffffff;
	   width: 600rpx;
	   &::after{
	     border: none;
	   }
	 }
	 input{
		border-bottom: 1rpx solid #999;
		height: 65rpx;
		padding: 15rpx 25rpx;
		line-height: 65rpx;
		font-size: 28rpx;
		background: #FFF;
	 }

	 .userinfo-button{
		display: hidden;
	 }

	 .cp-link{
		text-align: center;
		margin-top: 20rpx;
		height: 20px;
		line-height: 20px;
	 }

	.footer{
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.login1Wrapper{

	}
	.login2Wrapper{
		margin: 30rpx;
	}
	.nickname{
		font-size: 14px;
		font-weight:300;
		text-align: center;
		padding: 0 70rpx;
		margin-bottom: 30rpx;
		/* margin-top:30rpx; */
	}

	.avatar-wrapper{
		padding: 30rpx 0;
		height: 280rpx;
		text-align: center;
		position: relative;
	}

	.userinfo-avatar {
		border: 1px solid #333333;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		border-radius: 128rpx;
		width: 256rpx;
		height: 256rpx;
	}
</style>